<template>
	<div>
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form size="mini" ref='form' :model="form" label-width="110px" v-loading='loading'>
				<el-row :gutter="10">
					<el-col :span="7">
						<el-form-item label="故障名称:">
							<el-input v-model="form.faultName" placeholder="请输入故障名称" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="故障类型:">
							<el-input v-model="form.faultType" placeholder="请输入故障类型" clearable :disabled='detailDisable'></el-input>
							<!-- <el-select v-model="form.faultType" placeholder="请选择故障类型" clearable :disabled='detailDisable'>
								<el-option v-for="(item) in faultTypeArr" :key="item.value" :label="item.label" :value="item.label">
								</el-option>
							</el-select> -->
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="电梯使用单位:">
							<el-select v-model="form.userCompany" filterable placeholder="请选择电梯使用单位" clearable :disabled='detailDisable'>
								<el-option v-for="(item) in userCompanyArr" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="7">
						<el-form-item label="解决人:">
							<el-select v-model="form.solvePerson" filterable placeholder="请选择解决人" clearable :disabled='detailDisable'>
								<el-option v-for="(item) in solvePersonArr" :key="item.id" :label="item.username" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7" :offset='1'>
						<el-form-item label="解决时间:">
							<el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd' v-model="form.solveTime" type="date" placeholder="请选择解决时间"
							 clearable :disabled='detailDisable'>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="15">
						<el-form-item label="故障解决方法:">
							<el-input v-model="form.solution" type="textarea" resize="none" :rows="5" clearable placeholder="请输入故障解决方法"
							 :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="15">
						<el-form-item label="历史故障素材:">
							<el-button class="fl" type="primary" @click='addHistory' :disabled='detailDisable'>+</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10" v-for="(item,index) in historyArr" :key='index'>
					<el-col :span="15">
						<el-form-item label="素材名称:">
							<el-input v-model="item.name" placeholder="请输入素材名称" clearable :disabled='detailDisable'></el-input>
							<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="item.fileList" :on-change="(file, fileList) => {upLoadChange(file, fileList, item.fileList)}"
							 :on-remove="(file, fileList) => {upLoadRemove(file, fileList, index)}" :auto-upload="false" list-type="picture"
							 name="upfile" :disabled='detailDisable'>
								<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传素材</el-button>
								<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传10张</div>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="1" v-if="!detailDisable">
						<i class="el-icon-close" style="font-size: 16px;cursor:pointer;margin-top: 6px;" @click="removeCurrent(index)"></i>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImg'>
			<img :src="dialogImgUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		axiosChange,
		moment
	} from "@/common.js";
	export default {
		props: {
			currentId: {
				type: Number,
				default () {
					return 0
				}
			},
			currentType: {
				type: Number,
				default () {
					return 0
				}
			},
			addAndCompileShow: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return ''
				}
			}
		},
		mounted() {
			this.getMessage()
			if (this.currentId) {
				this.loading = true
				this.getCompList()
			}
			if (this.currentType == 2) {
				this.detailDisable = true
			} else {
				this.detailDisable = false
			}
		},
		data() {
			return {
				loading: false,
				ensureBtn: false,
				detailDisable: false,
				form: {
					faultName: '',
					faultType: '',
					userCompany: '',
					solvePerson: '',
					solveTime: '',
					solution: ''
				},
				faultTypeArr: [],
				userCompanyArr: [],
				solvePersonArr: [],
				historyArr: [],
				imgDialogShow: false,
				dialogImgUrl: '',
			}
		},
		methods: {
			addHistory() {
				let obj = {
					name: '',
					fileList: []
				}
				this.historyArr.push(obj)
			},
			removeCurrent(index) {
				this.historyArr.splice(index, 1)
			},
			getMessage() {
				axiosGet('/manu/elevator/fault/persons/', '', (res) => {
					if (res.code == 0) {
						this.userCompanyArr = res.detail.companys
						this.solvePersonArr = res.detail.users
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getCompList() {
				let url = '/manu/elevator/fault/' + this.currentId + '/'
				axiosGet(url, '', (res) => {
					this.loading = false
					if (res.code == 0) {
						this.form.faultName = res.detail.name
						this.form.faultType = res.detail.etype
						this.form.solution = res.detail.solution
						this.form.userCompany = res.detail.property_company // 使用单位id
						this.form.solvePerson = res.detail.auth_user // 用户id
						this.form.solveTime = res.detail.stime // 日期
						this.historyArr = res.detail.materials.map((item) => {
							if (item.pictures) {
								item.fileList = item.pictures.split(',')
								let arr = []
								item.fileList.map((item1) => {
									let obj = {
										name: '',
										url: item1
									}
									arr.push(obj)
								})
								item.fileList = arr
							}
							return item
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			closeImg() {
				this.imgDialogShow = false
			},
			upLoadPreview(file) {
				this.imgDialogShow = true
				this.dialogImgUrl = file.url
			},
			//上传文件之前触发
			upLoadChange(file, fileList, item) {
				item.push(file)
				const isLt2M = file.size / 1024 < 800;
				if (file.name.split(".")[1] != "jpg" && file.name.split(".")[1] != "png" && file.name.split(".")[1] != "jpeg") {
					this.$message.error('只能上传JPG/PNG/JPEG格式图片');
					item = fileList.slice(0, -1);
					return
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 800kb!,请重新上传');
					item = fileList.slice(0, -1);
					return
				}
				item = fileList.slice(-10);
			},
			//删除文件之前的函数
			upLoadRemove(file, fileList, index) {
				this.historyArr[index].fileList = fileList;
			},
			//上传照片接口
			uploadImage(imgList, num) {
				if (imgList.leng != 0) {
					const formData = new FormData();
					formData.append("upfile", imgList[num].raw)
					return this.$axios({
						url: "/utils/upload/",
						method: "post",
						data: formData
					})
				} else {
					console.log('没有照片')
				}
			},
			close() {
				this.$emit('closeDialog')
			},
			submit(form) {
				this.$refs[form].validate(async (valid) => {
					if (valid) {
						for (let item of this.historyArr) {
							let permises = []
							let arr = []
							item.pictures = []
							for (let i = 0; i < item.fileList.length; i++) {
								if (item.fileList[i].raw) {
									permises.push(this.uploadImage(item.fileList, i))
								} else {
									arr.push(item.fileList[i].url)
								}
							}
							let res = await Promise.all(permises)
							for (let i = 0; i < res.length; i++) {
								res[i].code == 0 && item.pictures.push(res[i].detail)
							}
							item.pictures = item.pictures.join(',')
						}
						console.log(this.historyArr)
						this.ensureBtn = true
						let url = ''
						let method = ''
						let data = {
							name: this.form.faultName,
							etype: this.form.faultType,
							solution: this.form.solution,
							property_company: this.form.userCompany, // 使用单位id
							auth_user: this.form.solvePerson, // 用户id
							stime: this.form.solveTime, // 日期
							materials: this.historyArr
						}
						if (this.currentType == 0) {
							url = '/manu/elevator/fault/'
							method = 'post'
						} else {
							url = '/manu/elevator/fault/' + this.currentId + '/'
							method = 'put'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureBtn = false
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.$emit('success')
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		margin: 0 !important;
	}
</style>
